

    
$common-color:#6dd5ed;
$title-color:#FCFEFD;
$content-title-color:#FC980E;
$finish-color:#00FE0F;
$jihua-color:linear-gradient(#5ee7df, #b490ca);;
$wancheng-color: linear-gradient(#fa709a, #fee140);
$point-color: linear-gradient(#0250c5, #d43f8d);
$pointtext-color: gray;
html{
     background:#00065b;
     font-family: 微软雅黑, MicrosoftYahei, sans-serif;
     body{
        .main{ //主界面
            height: 100%;
            width: 100%;
            position: fixed;
            background-size: 100% 100%;
            
            .head{//头部
             margin-top: 8px;
             .company{
                 color: #BB5E00;
                 p{
                     text-align: center;
                     margin-top: 6%;
                     margin-left: 12%;
                     font-size: 1.2vw;
                     width: 115%;
                 }
             }
                .title{
                    margin-left: 20%;
                    font-size: 2.4vw;
                    color:#00FFFF ;
                }
                .time{
                    color: #C4D6E9;
                    margin-left: 8%;
                    margin-top: 2%;
                    font-weight: 600;
                    font-size: 0.9vw
                }
                .buttons{
                    margin-top: 1.4%;
                    font-size: 1.1vw;
                    color: #BDCFE3;
                    i{
                     font-size: 1.8vw;
                     font-weight: 600;
                     color:$common-color;
                     display: inline-block;
                     position: relative;
                     top: 4px;
                    }
                    span{
                     cursor: pointer;
                    }
                }
            }
            .mainContent{
                border-top: 3px solid #6dd5ed;
                border-left: 3px solid #6dd5ed;
                border-right: 3px solid #6dd5ed;
                height: 90%;
                width: 98%;
                margin-top: 0.2%;
                margin-left: 1%;
                .title{
                    color: white;
                    margin-left: 44%;
                    font-size: 1.6vw;
                    margin-top: 1%;
                    margin-bottom: 0.2%;
                }
               
                   .leftContent{
                       height: 99%;
                       .item{
                        height: 32%;
                        .contenTitle{
                            margin-left: 38.5%;
                            font-size: 1.3vw;
                            margin-top: 1%;
                            color: $content-title-color;
                            border-top: 5px solid #F8E063;
                            width: 25%;
                            text-align: center;
                        }   
                        .content{
                            height: 100%;
                            .info{
                                li{
                                    list-style: none;
                                }
                                li:nth-child(1){
                                    margin-top: 40%;
                                    margin-left: 45% ;
                                     img{
                                         width: 80%;
                                         transform:rotate(30deg);
                                     }
                                 }
                                 li:nth-child(2){
                                    color: $title-color;
                                    margin-left: 20% ;
                                    margin-bottom: 5%;
                                    font-size: 1vw;
                                    width: 100%;
                                 }
                                 li:nth-child(3){
                                     margin-left: 15% ;
                                     text-align: center;
                                     color:$finish-color;
                                     width: 100%;
                                     font-size: 1vw;
                                  }
                            }
                            .zhuimgs{
                                margin-left: 15%;
                                border-bottom: 2px solid gray;
                                height: 60%;
                                .rate{
                                    height: 100%;
                                    ul{
                                        height: 13%;
                                        position: relative;
                                        left: -2.5vw;
                                        li{
                                            list-style: none;
                                            color: $title-color;
                                            height: 1.5vw;
                                        }
                                    }
                                   
                                }
                                .date{
                                    color: $title-color;
                                    position: relative;
                                    top: 11vw;
                                    left: -1vw;
                                }
                                .point{
                                    height: 75%;
                                    position: relative;
                                    top: 8%;
                                    div{
                                        position: absolute;
                                        // 1 - top代表几率
                                        top:0%;
                                        p{
                                            width: 5vw;
                                            height: 0.6vw;
                                            color: $common-color;
                                            text-align: center;
                                        }
                                        button{
                                            background-color: $common-color;
                                            width: 10px;
                                            height: 10px;
                                            border-radius: 50%;
                                            margin-left: 44.5%;
                                        }
                                    }
                                   
                                }
                            }
                        } 
                        .content2{
                            height: 100%;
                            .info{
                                li{
                                    list-style: none;
                                }
                                li:nth-child(1){
                                    margin-top: 40%;
                                    margin-left: 45% ;
                                     img{
                                         width: 80%;
                                         transform:rotate(30deg);
                                     }
                                 }
                                 li:nth-child(2){
                                    color: $title-color;
                                    margin-left: 20% ;
                                    margin-bottom: 5%;
                                    font-size: 1vw;
                                    width: 100%;
                                 }
                                 li:nth-child(3){
                                     margin-left: 15% ;
                                     text-align: center;
                                     color:$finish-color;
                                     width: 100%;
                                     font-size: 1vw;
                                  }
                            }
                            .zhuimgs{
                                margin-left: 15%;
                                border-bottom: 2px solid gray;
                                height: 62%;
                                position: relative;
                                top: 1%;
                                .rate{
                                    height: 100%;
                                    ul{
                                        position: relative;
                                        left: -3vw;
                                        /* top: 0.2vw; */
                                        height: 13%;
                                        li{
                                            list-style: none;
                                            color: $title-color;
                                        }
                                    
                                    }
                                   
                                }
                                .date{
                                    color: $title-color;
                                    position: relative;
                                    top: 11vw;
                                    left: -1vw;
                                }
                                .point{
                                    height: 75%;
                                    position: relative;
                                    top: 8%;
                                    div{
                                        position: absolute;
                                        // 1 - top代表几率
                                        top:0%;
                                        p{
                                            width: 5vw;
                                            height: 0.6vw;
                                            color: $common-color;
                                            text-align: center;
                                        }
                                        button{
                                            background-color: $common-color;
                                            width: 10px;
                                            height: 10px;
                                            border-radius: 50%;
                                            margin-left: 44.5%;
                                        }
                                    }
                                   
                                }
                            }
                        } 
                        .content3{
                            height: 100%;
                            .info{
                                li{
                                    list-style: none;
                                }
                                li:nth-child(1){
                                    margin-top: 40%;
                                    margin-left: 45% ;
                                     img{
                                         width: 80%;
                                         transform:rotate(30deg);
                                     }
                                 }
                                 li:nth-child(2){
                                    color: $title-color;
                                    margin-left: 20% ;
                                    margin-bottom: 5%;
                                    font-size: 1vw;
                                    width: 100%;
                                 }
                                 li:nth-child(3){
                                     margin-left: 15% ;
                                     text-align: center;
                                     color:$finish-color;
                                     width: 100%;
                                     font-size: 1vw;
                                  }
                            }
                            .zhuimgs{
                                margin-left: 15%;
                                border-bottom: 2px solid gray;
                                height: 63%;
                                .rate{
                                    height: 100%;
                                    ul{
                                        height: 13%;
                                        position: relative;
                                        left: -2.8vw;
                                        li{
                                            list-style: none;
                                            color: $title-color;
                                            height: 1.5vw;
                                        }
                                    }
                                   
                                }
                                .date{
                                    color: $title-color;
                                    position: relative;
                                    top: 11vw;
                                    left: -1vw;
                                }
                                .point{
                                    height: 81%;
                                    position: relative;
                                    top: 4.5%;
                                    div{
                                        position: absolute;
                                        // 1 - top代表几率
                                        top:0%;
                                        p{
                                            width: 5vw;
                                            height: 0.6vw;
                                            color: $common-color;
                                            text-align: center;
                                        }
                                        button{
                                            background-color: $common-color;
                                            width: 10px;
                                            height: 10px;
                                            border-radius: 50%;
                                            margin-left: 44.5%;
                                        }
                                    }
                                   
                                }
                            }
                        } 
                       }
                   }
                   .midContent{
                    height: 99%;
                    .item{
                        height: 48%;
                         .contenTitle{
                    margin-left: 38.5%;
                    font-size: 1.3vw;
                    margin-top: 3%;
                    color: $content-title-color;
                    border-top: 5px solid #F8E063;
                    width: 25%;
                    text-align: center;
                    
                }    
                .contenTitleduo{
                   width: 40%;
                   margin-left: 30%;
                }
                .content{
                   .content1{
                     .left{
                         color: $title-color;
                         position: relative;
                         left: 3vw;
                         margin-top: 2.5vw;
                         p{
                             text-align: center;
                             font-size: 1.3vw;
                         }
                     }
                     .right{
                         position: relative;
                         left: 6vw;
                         top: 3.2vw;
                         font-size: 1.4vw;
                        .num{
                          display: inline-block;
                          background-color: #00FFFF;
                          color:red;
                        }
                        .danwei{
                            color: $finish-color;
                        }
                     }
                   }
                }
                }
                   }
                   .rightContent{
                    height: 99%;
                    .item{
                        height: 48%;
                        .contenTitle{
                            margin-left: 34.5%;
                            font-size: 1.3vw;
                            margin-top: 2%;
                            color: $content-title-color;
                            border-top: 5px solid #F8E063;
                            width: 45%;
                            text-align: center;
                            margin-bottom: 1%;
                        }   
                        .content{
                            height: 100%;
                            .info{
                                margin-top: 65%;
                                li{
                                    list-style: none;
                                }
                                li:nth-child(1){
                                    
                                    margin-left: 45% ;
                                     img{
                                         width: 80%;
                                         transform:rotate(30deg);
                                     }
                                 }
                                 li:nth-child(2){
                                    color: $title-color;
                                    margin-left: 20% ;
                                    margin-bottom: 5%;
                                    font-size: 1vw;
                                    width: 100%;
                                 }
                                 li:nth-child(3){
                                     margin-left: 15% ;
                                     text-align: center;
                                     color:$finish-color;
                                     width: 100%;
                                     font-size: 1vw;
                                  }
                            }
                            .zhuimgs{
                                margin-left: 15%;
                                margin-top: 5%;
                                border-bottom: 3px solid gray;
                                height: 60%;
                                .date{
                                    color: $title-color;
                                    position: relative;
                                    top: 110%;
                                }
                                .point{

                                    height: 95%;
                                    position: relative;
                                    top: -0.8vw;
                                    .el-row{
                                        //计算点位
                                        position: relative;
                                    top: 100%;
                                        p{
                                            height: 0.6vw;
                                            text-align: center;
                                            color: $common-color;
                                        }
                                        button{
                                            margin-left: 1.1vw;
                                            background-color: $common-color;
                                            width: 10px;
                                            height: 10px;
                                            border-radius: 50%;
                                        }
                                    }
                                   
                                }
                                    ul{
                                        height: 80%;
                                        position: relative;
                                        top: -2.7vw;
                                        left: -2.7vw;
                                        li{
                                            list-style: none;
                                            color: $title-color;
                                            height: 2.33vw;
                                        }
                                    }
                                   
                                
                            }
                        } 
                       }
                }  
               
                                               
                   
          
            }
        }
     }
 }
 *{
     margin: 0;
     padding: 0;
 }